<template>
  <div class="top-nav">
      <div class="nav-bg text-overflow">
         <div class="site-logo"></div>
         <div class="site-title"> {{$t('message.title')}} </div>
         <div class="tools-group">
            <el-button type="success" @click="goHome" plain>{{$t('toolsbar.home')}}</el-button>
            <el-button type="primary" @click="clearCache" plain>{{$t('toolsbar.clear')}}</el-button>
            <el-button type="danger" @click="loginOut" plain>{{$t('toolsbar.signOut')}}</el-button>
            <el-badge v-if="newMember" :value="newMember" class="item">
              <el-button @click="handleNewMember">{{$t('toolsbar.newMember')}}</el-button>
            </el-badge>
            <el-badge v-if="noAuthShop" :value="noAuthShop" class="item">
              <el-button @click="handleAuthShop">{{$t('toolsbar.noAuthShop')}}</el-button>
            </el-badge>           
         </div>
      </div>
  </div>
</template>

<script>
import USB from "@/utils/USB.js"; // 获取url
export default {
  name:'Top-nav',
  data () {
    return {
        newMember: 0,
        noAuthShop: 0
    };
  },
  components: {},
  created() {
    this.timer = setInterval(this.init,1000*60*10); // 一段时间刷新 十分钟
  },
  mounted() {
    this.init();
  },
  methods: {
    init(){
      this.getNewMember();
      this.queryShopsStatus(0);
    },
    goHome(){
        // 返回首页
        this.$router.push({name:"home"});
    },
    clearCache(){
       // 清除缓存
       try {
          sessionStorage.removeItem(1);
          sessionStorage.removeItem(2);
          sessionStorage.removeItem(3);
          sessionStorage.removeItem(4);
          sessionStorage.removeItem(9);
          sessionStorage.removeItem(5);
          sessionStorage.removeItem(100);
          this.$message.success("清除缓存成功！");
       } catch (error) {
         this.$message.error("清除缓存失败！");
       }
    },
    loginOut(){
        // 退出登录
        this.clearCache();
        this.$router.replace({name:"login"});
    },
    getNewMember(){
       this.$Http.post(USB.U91,null).then(res=>{
         if(res.data.resp_code === "000000"){
            this.newMember = res.data.result;
         }else{
           this.$notify.info({
              title: '消息',
              message: res.data.resp_message
            });
         }
       }).catch(err=>{
         this.$notify.error({
            title: '错误',
            message: '获取实名新用户失败！'
          });
       })
    },
    queryShopsStatus(status){
          // 查询商户审核信息 0表达未审核 1代表审核
          let params = `roleId=1&usershopStatus=${status}&size=1`;
          let token = sessionStorage.getItem(1);
          let url = `user/afer/${token}`;
          this.$Http.post(url,params).then(res=>{
              if(res.data.resp_code === "000000"){
                  this.noAuthShop = res.data.result.totalElememts;
              }else{
                  this.$notify.info({
                    title: '消息',
                    message: res.data.resp_message
                  });
              }
          }).catch(err=>{
              this.$notify.error({
                    title: '错误',
                    message: '获取商户信息失败！'
              });
          })
      },
      handleNewMember(){
        // 点击新进的会员 查看信息
        this.$router.push({name:"authInfo",params:{type:"realname"}});
      },
      handleAuthShop(){
        // 有商户需要审核 点击去审核
        this.$router.push({name:"authInfo",params:{type:"shop"}});
      }

  },
  beforeDestroy(){
    // 清除定时器
    clearInterval(this.timer);
  }
}

</script>
<style scoped>
.top-nav{
    height: 100%;
    width: 100%;
    box-sizing: border-box;
}
.nav-bg{
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    background-color: #409eff;   
}
.site-title{
   font-size: 24px;
   padding: 0 20px;
   color: #ffffff; 
}
.item{
  margin-left: 20px;
}
</style>